<template>
  <div class="like">
    <div class="like-top">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" />
      猜您喜欢
    </div>
    <ul class="like-list">
      <li class="like-item border-bottom" v-for="item in likeList" :key="item.id">
        <div class="like-img">
          <img :src="item.imgUrl" />
        </div>
        <div class="like-text">
          <div class="like-title">{{ item.title }}</div>
          <div class="like-message">{{ item.message }}条评论</div>
          <div class="like-map">
            <span class="like-mark">￥<b>{{ item.price }}</b></span>起
            <span>{{ item.map }}</span>
          </div>
        </div>
      </li>
    </ul>
    <p class="product-all">查看所有产品</p>
  </div>
</template>
<script>
  export default {
    props:['likeList']
  }
</script>
<style scoped>
  .like{
    margin-top: .2rem;
    font-size: .28rem;
    background-color: #fff;
    padding: 0 .2rem;
  }
  .like-top{
    padding: .2rem 0;
    font-size: .32rem;
  }
  .like-top img{
    width: .3rem;
    height: .3rem;
  }
  .like-list{

  }
  .like-item{
    position: relative;
    padding: .2rem 0;
    overflow: hidden;
  }
  .like-item:last-child{
    padding-bottom: .2rem;
  }
  .like-img{
    float: left;
  }
  .like-img img{
    width: 2rem;
    height: 2rem;
  }
  .like-text{
    overflow: hidden;
    padding-left: .22rem;
    position: relative;
  }
  .like-title{
    font-size: .36rem;
    margin-top: .3rem;
    color:#212121;
  }
  .like-message{
    font-size: .24rem;
    margin: .3rem 0;
    color:#616161;
  }
  .like-map{
    color:#616161;
  }
  .like-mark{
    color:#ff8300;
  }
  .like-mark b{
    font-size: .4rem;
  }
  .like-map span:last-child{
    position: absolute;
    right: 0;
  }
  .product-all{
    padding: .3rem;
    text-align: center;
  }
</style>
